<template>
  <div class="search-panel">
    <div class="header">
      <div class="header-left">
        <i class="iconfont icon-sousuo"></i>
        <input type="text" placeholder="衬衣">
      </div>
      <div class="header-right" @click="handlePanelClick">
        取消
      </div>
    </div>
    <div class="content">
      <div class="more">
        <div class="title">
          <i class="iconfont icon-lightbulb"></i>
          <span>更多搜索方式</span>
        </div>
        <div class="tags">
          <span>搜索店铺</span>
        </div>
        <div class="hot-search">
          <div class="title">
            <i class="iconfont icon-huo1"></i>
            <span>热门搜索</span>
          </div>
          <div class="tags">
            <span>家用蚊帐</span>
            <span>长款旗袍</span>
            <span>电热水壶</span>
            <span>清凉喷雾</span>
            <span>少女裙子夏</span>
            <span>衬衫男ins</span>
            <span>电热水壶</span>
            <span>雪梅娘点心</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'searchPanel',
  methods: {
    handlePanelClick () {
      this.$emit('searchPanelHandler')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/mixins.styl'
.search-panel
  position fixed
  left 0
  top 0
  bottom 0
  right 0
  background white
  z-index 999
  .header
    display flex
    align-items center
    width 100%
    height 50px
    border-bottom-1px(rgba(0,0,0,0.1))
    .header-left
      margin-left 5%
      box-sizing border-box
      padding-left 10px
      width 80%
      height 75%
      background #ededed
      border-radius 8px
      display flex
      align-items center
      .iconfont
        font-size 18px
        color #9c9c9c
      input
        background transparent
        line-height 16px

      input::-webkit-input-placeholder
          color #9c9c9c
          font-size 16px
    .header-right
      width 15%  
      text-align center
      color #9c9c9c
  .content
    position absolute
    left 0
    right 0
    top 50px
    bottom 0
    padding 20px 15px
    .more,.hot-search
      margin-top 15px
      .title
        color $lightGray
      .tags
        margin-top 10px
        span
          display inline-block
          background #ededed
          color #333
          padding 8px
          font-size 12px
          border-radius  20px
          margin-bottom 10px
          margin-right 5px

</style>
